<template>
  <a-card style="width: 100%">
    <!-- 搜索 -->
    <a-form name="customized_form_controls" layout="inline" :model="values" @finish="onFinish"
      style="margin: 30px 0; background: #fff" expandFixed="true">
      <a-form-item name="title" label="账号">
        <a-input v-model:value="values.title" placeholder="请输入账号" />
      </a-form-item>
      <a-form-item name="emile" label="邮箱">
        <a-input v-model:value="values.emile" placeholder="请输入邮箱" />
      </a-form-item>
      <a-form-item name="role" label="角色">
        <a-select v-model:value="values.role" style="width: 120px">
          <a-select-option v-for="(item, ind) in roles" :key="ind" :value="item.value">{{ item.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="creas" label="状态">
        <a-select v-model:value="values.creas" style="width: 120px">
          <a-select-option v-for="(item, ind) in zt" :key="ind" :value="item.value">{{ item.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item expandFixed="right">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button @click="() => toset()">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
  <br />
  <a-card style="width: 100%">
    <a-card v-if="state.selectedRowKeys.length != 0">
      <a-space>
        <a-button @click="() => toedit('admin')">授权</a-button>
        <a-button @click="() => toedit('visitor')">解除授权</a-button>
        <a-button @click="() => toedit('locked')">禁用</a-button>
        <a-button @click="() => toedit('active')">启用</a-button>
      </a-space>
    </a-card>
    <a-table :dataSource="usersList" :columns="columns" style="width: 100%; height: 100%" :scroll="{ x: 1300 }"
      :pagination="pagination" :row-selection="{ onChange: onSelectChange }" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <!-- 设置 -->
        <template v-if="column.key === 'address'">
          <div class="edits">
            <a-button @click="() => editactive(record)">{{ record.status == "active" ? "禁用" : "启用" }}</a-button>
            <a-button @click="() => editrole(record)">{{ record.role == "admin" ? "解除授权" : "授权" }}</a-button>
          </div>
        </template>
        <!-- 角色 -->
        <template v-if="column.key === 'role'">
          {{ record.role == 'admin' ? '管理员' : '游客' }}
        </template>
        <!-- 状态 -->
        <template v-if="column.key === 'status'">
          <a-badge :status="record.status == 'active' ? 'success' : 'warning'" />
          {{ record.status == "active" ? "启用" : "已锁定" }}
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useUsers } from "../../store/users"
import { reactive, computed, ref } from "vue"
import { message } from "ant-design-vue";
const users = useUsers();
const { usersList, total } = storeToRefs(users)

//定义分页数据
let current = ref(1), pageSize = ref(12);

// 初始化请求数据
users.getsearchusers({
  page: current.value,
  pageSize: pageSize.value
})
//定义搜索框的初始数据
const values = reactive({
  title: "",
  emile: "",
  role: "",
  creas: "",
});

//重置
const toset = () => {
  location.reload()
}
//状态
let zt = [
  { label: "启用", value: "active" },
  { label: "已锁定", value: "locked" },
];
//角色
let roles = [
  { label: "管理员", value: "admin" },
  { label: "游客", value: "visitor" },
]
//点击搜索获取表单数据
const onFinish = () => {
  //点击模糊搜索
  //传入一个开关 控制是否搜索完数据时切换页面的问题
  searchs(true)
}

//进入页面清空搜索的缓存
localStorage.removeItem("searchobj")

//创建一个模糊搜索的公共方法  方便多次调用
const searchs = (flag: boolean) => {
  let obj = {};

  //不是点击搜索
  if (!flag) {
    let newobj = localStorage.getItem("searchobj")
    if (newobj) {
      obj = JSON.parse(newobj)
      obj = {
        page: current.value,
        pageSize: pageSize.value,
        ...obj
      }
      return users.getsearchusers(obj)
    }
  }else{
    current.value=1;
    pageSize.value=12;
  }
  if (values.title !== "") {
    obj = { ...obj, name: values.title }
  }
  if (values.emile != "") {
    obj = { ...obj, email: values.emile }
  }
  if (values.role != "") {
    obj = { ...obj, role: values.role }
  }
  if (values.creas != "") {
    obj = { ...obj, status: values.creas }
  }

  localStorage.setItem('searchobj', JSON.stringify(obj))
  
  obj = {
    page: current.value,
    pageSize: pageSize.value,
    ...obj
  }
  //执行模糊搜索的方法
  users.getsearchusers(obj)
}
//分页
const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}));

//多选

type Key = string | number;
const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});

const onSelectChange = (selectedRowKeys: Key[]) => {
  state.selectedRowKeys = selectedRowKeys;
};

// 表格change事件
const handleTableChange = (val: any) => {
  //点击分页 切换分页 请求数据
  current.value = val.current;
  pageSize.value = val.pageSize;
  searchs(false)
}

//点击更改状态 
const editactive = (val: any) => {
  let obj = { ...val };
  if (obj.status == "active") {
    obj.status = "locked"
  } else {
    obj.status = "active"
  }
  users.setstatususers(obj)
}

//点击更新授权
const editrole = (val: any) => {
  let obj = { ...val };
  if (obj.role == "admin") {
    obj.role = "visitor"
  } else {
    obj.role = "admin"
  }
  users.setstatususers(obj) 
}


//更新用户授权 和 状态
const toedit = (tak: string) => {
  state.selectedRowKeys.map(v => {
    usersList.value.map((a: any) => {
      if (a.id == v) {
        if(tak == "admin" || tak == "visitor"){
          console.log(tak,"666666666666")
          a.role = tak
        }
        if(tak == 'active' || tak == "locked"){
          a.status = tak
        }
        users.setstatususers(a)
      }
    });
  })
 message.success("操作成功")
}


//表格数据格式
const columns = [
  {
    title: "账户",
    dataIndex: "name",
    key: "name",
    width: 100,
    fixed: "left",
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email",
    width: 100,
  },
  {
    title: "角色",
    dataIndex: "role",
    key: "role",
    width: 100,
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: 100,
  },
  {
    title: "注册日期",
    dataIndex: "createAt",
    key: "createAt",
    width: 100,
  },
  {
    title: "编辑",
    dataIndex: "address",
    key: "address",
    width: 100,
    fixed: "right",
  },
];


</script>

<style></style>






























































